<template>
    <div>
        <PageTitle >
            <h1>Projects</h1>
        </PageTitle>

        <Tabs :panel="false">
            <Tab name="Recent Items" :selected="true">
                <div class="row">
                    <div  class="col-medium-1-1">
                        <Panel>
                            <table v-if="projects">
                                <tr>
                                    <th width="20%">Recent Item ID</th>
                                    <th width="50%">Name</th>
                                    <th width="15%">Consultant Name</th>
                                    <th width="15%">Client Name</th>
                                </tr>
                                <tr v-for="project in projects">
                                    <td><router-link :to="{ name: 'Project', params: { id: project.id } }">{{project.id}}</router-link></td>
                                    <td><router-link :to="{ name: 'Project', params: { id: project.id } }">{{project.name}}</router-link></td>
                                    <td>{{project.consultant.name}}</td>
                                    <td>{{project.client.name}}</td>
                                </tr>

                            </table>
                            <div class="no-data" v-else>
                                <img class="no-data__checkmark" src="../../assets/img/check.png">
                                <p class="no-data__title">No Recent Items!</p>
                            </div>
                        </Panel>
                    </div>
                </div>
            </Tab>
            <Tab name="All Projects">
                All Projects
            </Tab>
            <Tab name="Project Teams">
                Project Teams
            </Tab>
        </Tabs>
    </div>
</template>
<script>
    import axios from 'axios'
    import Panel from './Panel.vue'
    import PageTitle from './PageTitle.vue'
    import SummaryBar from './SummaryBar.vue'
    import Tabs from './Tabs.vue'
    import Tab from './Tab.vue'

    export default {
        components:{
            Panel,
            PageTitle,
            SummaryBar,
            Tabs,
            Tab
        },
        data() {
            return {
                projects: null
            }
        },

        methods: {
            fetchData: function() {
                var self = this;

                axios.get(process.env.API_ROOT + '/recent-projects/', {
                })
                    .then(function(response) {
                        self.projects = response.data;
                    });
            },
        },

        watch: {
            '$route': 'fetchData',
        },

        created() {
            this.fetchData()
        }



    }
</script>